<template>
  <view class="page" v-if="shenheStatus == 0">
    <view class="pageLeft">
      <scroll-view scroll-y class="scroll">
        <view
          :class="['item', item.id === cat_id ? 'active' : '']"
          v-for="(item, i) of cat_list"
          :key="item.id"
          @click="clear(item.id)"
        >
          <view class="line"></view>
          {{ item.name }}
        </view>
      </scroll-view>
    </view>

    <view class="pageRight">
      <scroll-view scroll-y class="scroll" @scrolltolower="scrolltolower">
        <view class="list">
          <view
            class="item"
            v-for="(item, i) of goods_list"
            :key="i"
            @click="
              $utils.toUrl(
                `/marketing/serviceHome/goods/item/index?id=${item.id}`
              )
            "
          >
            <view class="img">
              <image mode="aspectFill" :src="item.cover_pic" lazy-load></image>
            </view>

            <view class="con">
              <view class="name"> {{ item.name }} </view>

              <view class="des">{{
                item.desc && item.desc.length ? item.desc.join(" · ") : ""
              }}</view>

              <view class="conFd">
                <view class="let">
                  <view class="flex">
                    <view class="price">
                      <view class="s1">{{ getPrice(item.price)[0] }}</view>
                      <view>.{{ getPrice(item.price)[1] }}</view>
                    </view>

                    <view class="oldPrice">¥{{ item.original_price }}</view>
                  </view>

                  <view class="num">
                    销量 {{ item.order_num }}

                    <view class="rig"> 去下单 </view>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>

        <toolsMore :status="moreStatus"></toolsMore>
      </scroll-view>
    </view>
  </view>
  <Shenhe v-else-if="shenheStatus == 1"></Shenhe>
</template>

<script>
import Shenhe from "@/components/shenhe/shenhe";
import { goodsCateList, goodsList } from "@/api/marketing/callOut";
import toolsMore from "@/components/tools/tools-more.vue";

export default {
  components: {
    Shenhe,
    toolsMore
  },

  computed: {
    getPrice() {
      return (price) => {
        if (!price) return ["0", "00"];
        return price.split(".");
      };
    }
  },

  data() {
    return {
      list: [],
      cat_list: [],
      cat_id: undefined,
      pageNo: 1,
      pageSize: 10,
      isEnd: false,
      goods_list: [],
      moreStatus: 1
    };
  },

  onLoad(opi) {
    if (opi.cat_id) this.cat_id = opi.cat_id;
    this.getCatList();
  },

  methods: {
    clear(id) {
      if (id === this.cat_id) return;

      this.goods_list = [];
      this.pageNo = 1;
      this.isEnd = false;
      this.cat_id = id;
      this.getGoodsList();
    },

    async getCatList() {
      const res = await goodsCateList();
      if (!res.code) {
        this.cat_list = res.data.list || [];
        if (this.cat_list && this.cat_list.length) {
          if (
            !this.cat_id ||
            !this.cat_list.find((el) => el.id === this.cat_id)
          )
            this.cat_id = this.cat_list[0].id;

          this.getGoodsList();
        }
      }
    },

    async getGoodsList() {
      let { pageNo, cat_id, pageSize } = this;
      const res = await goodsList({
        cat_id,
        pageNo,
        pageSize
      });
      uni.stopPullDownRefresh();
      this.moreStatus = 1;

      if (!res.code) {
        let { goods_list } = this,
          { list, totalCount } = res.data;

        if (list.length) {
          goods_list.push(...list);
          this.pageNo = this.pageNo + 1;
        }

        if (goods_list.length >= totalCount) {
          this.isEnd = true;
          this.moreStatus = 3;
        }
      }
    },

    scrolltolower() {
      if (this.isEnd) return;
      this.getGoodsList();
    }
  }
};
</script>

<style lang="scss">
.page {
  display: flex;
  height: 100vh;
  overflow: hidden;
}

.pageLeft {
  width: 168rpx;
  height: 100%;
  background: #f2f2f2;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);

  .item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 94rpx;
    text-align: center;
    font-size: 24rpx;
    color: #1d1d1d;

    &.active {
      color: #f0250e;
      font-weight: bold;
      background: #fff;

      .line {
        position: absolute;
        left: 0;
        top: 24rpx;
        bottom: 24rpx;
        width: 8rpx;
        background: #f0250e;
        border-radius: 0rpx 4rpx 4rpx 0rpx;
      }
    }
  }
}

.pageRight {
  flex: 1;
  overflow: hidden;
  height: 100%;
  background: #fff;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}

.scroll {
  height: 100%;
  overflow-y: auto;
}

.list {
  padding: 0 24rpx 24rpx;

  .item {
    position: relative;
    display: flex;
    padding: 24rpx 0;
    background: #fff;
    border-radius: 20rpx;

    &:after {
      content: "";
      position: absolute;
      left: 0;
      bottom: 0;
      left: 192rpx;
      right: 0;
      height: 1px;
      background: #f2f2f2;
    }
  }

  .img {
    position: relative;
    margin-right: 20rpx;
    width: 172rpx;
    height: 172rpx;

    image {
      display: block;
      width: 100%;
      height: 100%;
      border-radius: 16rpx;
      background: #000;
    }
  }

  .flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .con {
    flex: 1;
    overflow: hidden;
    font-size: 24rpx;
    color: #8c8c8c;
  }

  .name {
    overflow: hidden;
    flex: 1;
    font-size: 30rpx;
    font-weight: bold;
    color: #262626;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .des {
    padding: 6rpx 0 14rpx;
    font-size: 24rpx;
  }

  .conFd {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .let {
      flex: 1;
      overflow: hidden;
      display: flex;
      flex-direction: column;

      .flex {
        display: flex;
        align-items: center;
        justify-content: start;
      }

      .num {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
      }

      .price {
        display: flex;
        align-items: flex-end;
        margin-right: 10rpx;
        color: #f0250e;
        font-size: 24rpx;

        &:before {
          content: "¥";
        }

        .s1 {
          font-size: 36rpx;
          line-height: 1.1;
          font-weight: bold;
        }
      }
    }

    .rig {
      padding: 6rpx 18rpx;
      border-radius: 32px;
      font-size: 24rpx;
      color: #fff;
      background: linear-gradient(90deg, #f22407 0%, #f84d17 100%);
    }
  }
}

.oldPrice {
  position: relative;
  &:after {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    height: 1px;
    background: #888;
  }
}
</style>
